{% extends "::base.html.twig" %}

{% block title %}Profil de {{ licensee.lastname }} {{ licensee.firstname }} {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('/bundles/applicationsonatauser/css/main.css') }}" type="text/css" media="screen" />
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('http://code.highcharts.com/2.2/highcharts.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            
            var colors = Highcharts.getOptions().colors;
            
            // Graph Line
            var options = {
                chart: {
                    renderTo: 'evolutionGraph',
                    zoomType: 'x',
                    spacingRight: 20
                },
                title: {
                    text: ''
                },
                xAxis: {
                    categories: {{graphCategories|json_encode()|raw}}
                },
                yAxis: {
                    title: {
                        text: 'Points'
                    }
                },
                legend: {
                     layout: 'vertical',
                     align: 'top',
                     verticalAlign: 'top',
                     x: -10,
                     y: 0,
                     borderWidth: '2px'
                },
                series: [{
                    name: 'Points mensuels',
                    data: {{graphData|json_encode()}}
                }]
            };

            var chart = new Highcharts.Chart(options);

            // Pie chart
            var categories = ['Perfs', 'Contres'];
            var data = [{
                    y: 70,
                    color: colors[0],
                    drilldown: {
                        name: 'Perfs classement',
                        categories: ['17', '14', '15'],
                        data: [10, 27, 33],
                        color: colors[0]
                    }
                }, {
                    y: 30,
                    color: colors[1],
                    drilldown: {
                        name: 'Contres classement',
                        categories: ['10', '11'],
                        data: [17, 13],
                        color: colors[1]
                    }
                }];


                // Build the data arrays
                var browserData = [];
                var versionsData = [];
                for (var i = 0; i < data.length; i++) {

                    // add browser data
                    browserData.push({
                        name: categories[i],
                        y: data[i].y,
                        color: data[i].color
                    });

                    // add version data
                    for (var j = 0; j < data[i].drilldown.data.length; j++) {
                        var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
                        versionsData.push({
                            name: data[i].drilldown.categories[j],
                            y: data[i].drilldown.data[j],
                            color: Highcharts.Color(data[i].color).brighten(brightness).get()
                        });
                    }
                }

                // Create the chart
                chart2 = new Highcharts.Chart({
                    chart: {
                        renderTo: 'matchsPie',
                        type: 'pie'
                    },
                    title: {
                        text: ''
                    },
                    yAxis: {
                        title: {
                            text: 'Total percent market share'
                        }
                    },
                    plotOptions: {
                        pie: {
                            shadow: false
                        }
                    },
                    tooltip: {
                            valueSuffix: '%'
                    },
                    series: [{
                        name: 'Matchs joués',
                        data: browserData,
                        size: '50%',
                        dataLabels: {
                            formatter: function() {
                                return this.y > 5 ? this.point.name : null;
                            },
                            color: 'white',
                            distance: -25
                        }
                    }, {
                        name: 'Matchs joués',
                        data: versionsData,
                        innerSize: '50%',
                        dataLabels: {
                            formatter: function() {
                                //return null;
                                // display only if larger than 1
                                return this.y > 1 ? '<b>'+ this.point.name +'</b>' : null;
                            },
                            //color: 'white',
                            distance: 10
                        }
                    }]
                });
            });
    </script>
{% endblock %}

{% block title_page %}user{% endblock %}

{% block content %}

    <h1>Profil de {{ licensee.lastname }} {{ licensee.firstname }}</h1>

    <ul class="dashboard">
        <li class="l_0">
            <h2>Informations tennis de table</h2>

            <table>
                <tr>
                    <th>N° licence : </th>
                    <td>{{ licensee.licensee_number }}</td>
                </tr>
                <tr>
                    <th>Catégorie : </th>
                    <td>{{ licensee.category }}</td>
                </tr>
                <tr>
                    <th>Club : </th>
                    <td>{{ licensee.club_name }}</td>
                </tr>
                <tr>
                    <th>Valeur début de saison : </th>
                    <td>{{ startSeasonMensualPoint }}</td>
                </tr>
                <tr>
                    <th>Points mensuels : </th>
                    <td>{{ mensualPoint }}</td>
                </tr>
                <tr>
                    <th>Progression mensuelle : </th>
                    <td>{{ evoMensualPoint }}</td>
                </tr>
            </table>

        </li>
        <li class="l_1 matchsList">
            <h2>Derniers matchs joués</h2>

            <table>
                <thead>
                    <th>V/D</th>
                    <th>Adversaire</th>
                    <th>Points</th>
                    <th>Gain/Perte</th>
                </thead>

                <tbody>
                    {% for match in licenseeMatch_list %}
                    <tr class="m_{{ loop.index%2 }} cat_{{ match.category|lower }}">
                        <td class="category">{{ match.category }}</td>
                        <td>{{ match.opponent_lastname }} {{ match.opponent_firstname }}</td>
                        <td>{{ match.opponent_point }}</td>
                        <td></td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="4">Aucun match n'a encore été joué.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

        </li>
        <li class="l_0 clearer evolution">
            <h2>Evolution</h2>

            <div id="evolutionGraph"></div>

        </li>
        <li class="l_1">
            <h2>Perfs/contres</h2>

            <div id="matchsPie"></div>

        </li>
    </ul>

{% endblock %}